<template>
  <div>
    <el-container class="main-el-contarner">
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <!-- <el-form-item label="事件等级：" label-width="90px">
                                <el-select v-model="param.warnStatus" placeholder="事件等级" size="small" style="width:150px;">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="禁用" value="0"></el-option>
                                </el-select>
                            </el-form-item> -->
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入任务名称关键字检索"
                  clearable
                  v-model="param.name"
                  size="small"
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查找</el-button>
              </el-form-item>

              <el-form-item style="float: right">
                <el-button
                  type="text"
                  v-if="selectionChangeData == ''"
                  disabled
                  style="color: #cdc5bf"
                  ><i class="el-icon-delete"></i>删除数据</el-button
                >
                <el-button type="text" v-else style="color: #ff0000" @click="delClick"
                  ><i class="el-icon-delete"></i> 删除数据</el-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <el-button type="text" style="color: #18bc9c" @click="AddData"
                  ><i class="el-icon-plus"></i> 新增任务</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == '1'">
                <el-button
                  size="mini"
                  type="danger"
                  @click="forbiddenClick"
                  style="color: #ffffff"
                  ><i class="el-icon-video-pause"></i> 禁用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == '0'">
                <el-button
                  size="mini"
                  type="primary"
                  @click="forbiddenClick"
                  style="color: #ffffff"
                  ><i class="el-icon-video-play"></i> 启用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == ''">
                <el-button disabled size="mini" type="danger" style="color: #ffffff"
                  ><i class="el-icon-video-pause"></i> 禁用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == ''">
                <el-button disabled size="mini" type="primary" style="color: #ffffff"
                  ><i class="el-icon-video-play"></i> 启用</el-button
                >
              </el-form-item>
              <el-form-item
                style="float: right"
                v-if="
                  selectionChangeData == '' || selectionChangeData[0].active_status == '1'
                "
              >
                <el-button disabled size="mini" type="success" style="color: #ffffff"
                  ><i class="el-icon-bell"></i> 通知</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-else>
                <el-button
                  size="mini"
                  type="success"
                  @click="informClick"
                  style="color: #ffffff"
                  ><i class="el-icon-bell"></i> 通知</el-button
                >
              </el-form-item>
              <!-- <el-form-item style="float: right">selectionChangeData
                                <el-button size="mini" type="primary" plain @click="handleAdd"><i
                                        class="el-icon-download"></i> 导出数据</el-button>
                            </el-form-item> -->
            </el-form>
          </div>
          <div
            class="container-box"
            v-loading="loading"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table
              :data="tabledatas"
              border
              stripe
              max-height="480px"
              @row-dblclick="rowdbclick"
              ref="talbes"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="task_name" label="任务名称"> </el-table-column>
              <el-table-column prop="active_status" label="启用状态">
                <template #default="scope">
                  <span v-if="scope.row.active_status == '1'">启用</span>
                  <span v-if="scope.row.active_status == '0'">禁用</span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="event_id" label="事件id">
                            </el-table-column> -->
              <el-table-column prop="event_name" label="事件名称"> </el-table-column>
              <el-table-column prop="periodic_unit" label="周期单位">
                <template #default="scope">
                  <span v-if="scope.row.periodic_unit == '0'">分</span>
                  <span v-if="scope.row.periodic_unit == '1'">时</span>
                  <span v-if="scope.row.periodic_unit == '2'">天</span>
                  <span v-if="scope.row.periodic_unit == '3'">月</span>
                  <span v-if="scope.row.periodic_unit == '4'">年</span>
                </template>
              </el-table-column>
              <el-table-column prop="time_frame" label="执行周期"> </el-table-column>
              <el-table-column
                prop="active_time"
                label="开始执行时间"
                :formatter="dateFormat"
              >
              </el-table-column>
              <el-table-column prop="inform_time" label="提前通知时间(分钟)">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                    @click="editClick(scope.row)"
                    type="text"
                    icon="el-icon-edit"
                    style="color: #18bc9c; margin: 5px; padding: 0px"
                    >编辑</el-button
                  >
                  <!-- <el-button @click="delClick(scope.row)" type="text" icon="el-icon-delete"
                                        style="color: #FF0000;margin:5px;padding:0px;">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
          <div>
            <el-dialog
              v-if="dialogVisible"
              v-dialogDrag
              :title="dialogtitle"
              :visible.sync="dialogVisible"
              width="70%"
              top="30px"
              :class="dialogVisible == true ? 'action01' : 'action02'"
              :before-close="handleClose"
            >
              <el-form
                :model="formData.datas[0]"
                :inline="true"
                :rules="rules"
                ref="formdata"
              >
                <el-form-item
                  label="任务名称"
                  :label-width="formLabelWidth"
                  prop="task_name"
                >
                  <el-input
                    v-model="formData.datas[0].task_name"
                    style="width: 210px"
                    autocomplete="off"
                    placeholder="任务名称"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="启用状态"
                  v-if="formData.datas[0].scheduled_task_id != ''"
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="formData.datas[0].active_status"
                    disabled
                    style="width: 210px"
                    placeholder="请选择启用状态"
                  >
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="启用状态"
                  v-else
                  :label-width="formLabelWidth"
                  prop="active_status"
                >
                  <el-select
                    disabled
                    v-model="formData.datas[0].active_status"
                    style="width: 210px"
                    placeholder="请选择启用状态"
                  >
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="事件名称"
                  :label-width="formLabelWidth"
                  prop="event_name"
                >
                  <el-input
                    v-model="formData.datas[0].event_name"
                    style="width: 210px"
                    autocomplete="off"
                    placeholder="事件名称"
                    ><i slot="suffix" class="el-icon-more" @click="taskFrom"></i
                  ></el-input>
                </el-form-item>
                <el-form-item label="周期单位" :label-width="formLabelWidth">
                  <el-select
                    v-model="formData.datas[0].periodic_unit"
                    style="width: 210px"
                    placeholder="周期单位"
                  >
                    <el-option label="分" value="0"></el-option>
                    <el-option label="时" value="1"></el-option>
                    <el-option label="天" value="2"></el-option>
                    <el-option label="月" value="3"></el-option>
                    <el-option label="年" value="4"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="执行周期"
                  :label-width="formLabelWidth"
                  prop="time_frame"
                >
                  <el-input
                    v-model.number="formData.datas[0].time_frame"
                    style="width: 210px"
                    autocomplete="off"
                    placeholder="执行周期"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="提前通知时间(分钟)"
                  :label-width="formLabelWidth"
                  prop="inform_time"
                >
                  <!-- <el-input v-model="formData.datas[0].inform_time" style="width: 215px;"
                                        autocomplete="off"></el-input> -->
                  <!-- <el-time-picker v-model="formData.datas[0].inform_time" style="width: 215px;"
                                        placeholder="提前通知时间">
                                    </el-time-picker> -->
                  <el-input
                    v-model.number="formData.datas[0].inform_time"
                    type="int"
                    style="width: 210px"
                    autocomplete="off"
                    placeholder="提前通知时间(分钟)"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  v-if="formData.datas[0].event_name == ''"
                  label="开始执行时间"
                  :label-width="formLabelWidth"
                  prop="active_time"
                >
                  <!-- <el-input v-model="formData.datas[0].active_time" style="width: 215px;" autocomplete="off"></el-input> -->
                  <!-- <el-date-picker v-model="formData.datas[0].active_time" format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm" style="width: 210px;" type="datetime"
                                        placeholder="执行时间">
                                    </el-date-picker> -->
                  <el-date-picker
                    disabled
                    v-model="active_Date"
                    type="date"
                    format="yyyy-MM-dd"
                    @change="active_DateChange"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <el-time-picker
                    disabled
                    @change="active_timeChange"
                    v-model="active_time"
                    format="HH:mm"
                    value-format="HH:mm"
                    :picker-options="{
                      selectableRange: `${start_date} - ${end_date}`,
                    }"
                    placeholder="选择时间"
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item
                  v-else
                  label="开始执行时间"
                  :label-width="formLabelWidth"
                  prop="active_time"
                >
                  <!-- <el-input v-model="formData.datas[0].active_time" style="width: 215px;" autocomplete="off"></el-input> -->
                  <!-- <el-date-picker v-model="formData.datas[0].active_time" format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm" style="width: 210px;" type="datetime"
                                        placeholder="执行时间">
                                    </el-date-picker> -->
                  <el-date-picker
                    :clearable="false"
                    v-model="active_Date"
                    type="date"
                    format="yyyy-MM-dd"
                    @change="active_DateChange"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <el-time-picker
                    v-if="active_Date == ''"
                    disabled
                    :clearable="false"
                    @change="active_timeChange"
                    v-model="active_time"
                    format="HH:mm"
                    value-format="HH:mm"
                    :picker-options="{
                      selectableRange: `${start_date} - ${end_date}`,
                    }"
                    placeholder="选择时间"
                  >
                  </el-time-picker>
                  <!-- <el-time-picker v-else :clearable="false" @change="active_timeChange" v-model="active_time"
                                        format="HH:mm" value-format="HH:mm" :picker-options="{
                                            selectableRange: `${start_date} - ${end_date}`
                                        }" placeholder="选择时间">
                                    </el-time-picker> -->
                  <el-time-select
                    v-else
                    :clearable="false"
                    @change="active_timeChange"
                    v-model="active_time"
                    format="HH:mm"
                    value-format="HH:mm"
                    :picker-options="{
                      start: '00:00',
                      step: '00:05',
                      end: '23:59',
                      minTime: start_date,
                      maxTime: end_date,
                    }"
                    placeholder="选择时间"
                  >
                  </el-time-select>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
              </span>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="taskdialog"
              v-dialogDrag
              title="事件名称"
              :visible.sync="taskdialog"
              width="70%"
              top="30px"
              :class="taskdialog == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <Monitorevent @getName="TemplateData"></Monitorevent>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="bind">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="sendMsgdialog"
              v-dialogDrag
              title="通知企微"
              :visible.sync="sendMsgdialog"
              width="70%"
              top="30px"
              class="action03"
              :before-close="cancelSendMsgdialog"
            >
              <el-form
                :model="sendMsgfrom"
                :inline="true"
                :rules="rules1"
                ref="sendMsgfrom"
              >
                <el-form-item
                  label="手机号码"
                  :label-width="formLabelWidth"
                  prop="mobile"
                >
                  <el-input
                    v-model="sendMsgfrom.mobile"
                    style="width: 210px"
                    autocomplete="off"
                    placeholder="手机号码"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="通知用户"
                  :label-width="formLabelWidth"
                  prop="userid"
                >
                  <el-input
                    disabled
                    v-model="sendMsgfrom.userid"
                    style="width: 210px"
                    autocomplete="off"
                    placeholder="通知用户"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="通知方式"
                  :label-width="formLabelWidth"
                  prop="inform_way"
                >
                  <el-select
                    disabled
                    filterable
                    v-model="sendMsgfrom.inform_way"
                    multiple
                    placeholder="通知方式"
                    style="width: 210px"
                  >
                    <el-option label="企业微信" value="1"></el-option>
                    <el-option label="钉钉" value="2"></el-option>
                    <el-option label="邮件" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="邮件地址"
                  :label-width="formLabelWidth"
                  prop="userEmil"
                >
                  <el-input
                    v-model="sendMsgfrom.userEmil"
                    style="width: 210px"
                    autocomplete="off"
                    placeholder="邮件地址"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="cancelSendMsgdialog">取 消</el-button>
                <el-button type="primary" @click="sendMsgSave">保 存</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import moment from "moment";
import { getDateTimes, numFormat, getDateWeek } from "@/utils/index.js";
import { getlist, getgridsave, getdeletes } from "@/api/message/list";
import { getsendMsgqw, getsendMsgdd, getsendMsg } from "@/api/message/sendMsg";
import NoticeTemplate from "@/views/message/components/NoticeTemplate.vue";
import Monitorevent from "@/views/message/components/Monitorevent.vue";

export default {
  name: "Scheduledtask",
  components: { NoticeTemplate, Monitorevent },
  data() {
    return {
      a: "",
      active_Date: "",
      active_time: "",
      loading: false,
      selectionChangeData: [],
      loadingdata1: false,
      isloading: false,
      param: {
        funId: "msg_scheduled_task",
        baseSQL: "",
        warnStatus: "",
        name: "",
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      dialogVisible: false,
      sendMsgdialog: false,
      dialogtitle: "",
      sendMsgfrom: {},
      rules1: {
        mobile: [
          // { required: true, message: '手机号码必填', trigger: 'blur' },
          {
            // required: true,
            // pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
            // message: '请输入正确的手机号码',
            // trigger: 'blur',
          },
        ],
        userid: [
          // { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        userEmil: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      formData: {
        funId: "msg_scheduled_task",
        is_iot: false,
        datas: [
          {
            task_name: "", //任务名称
            active_status: "0", //启用状态
            event_id: "", //事件id
            event_name: "", //事件名称
            time_frame: "", //事件周期
            active_time: "", //执行时间
            inform_time: "", //通知时间
            periodic_unit: "", //周期单位
            task_description: "", //任务描述
          },
        ],
      },
      rules: {
        task_name: [{ required: true, message: "任务名称必填", trigger: "blur" }],
        active_status: [{ required: true, message: "启用状态必填", trigger: "blur" }],
        event_name: [{ required: true, message: "事件名称必填", trigger: "blur" }],
        time_frame: [
          { required: true, message: "执行周期必填", trigger: "blur" },
          {
            required: true,
            type: "number",
            message: "只能填写数字",
            trigger: "blur",
          },
        ],
        active_time: [{ required: true, message: "执行时间必填", trigger: "blur" }],
        inform_time: [
          { required: true, message: "提前通知时间必填", trigger: "blur" },
          {
            required: true,
            type: "number",
            message: "只能填写数字",
            trigger: "blur",
          },
        ],
      },
      formLabelWidth: "150px",
      taskdialog: false,
      statusData: "",
      eventData: "",
      contrOne: "",
      start_date: "",
      end_date: "",
      sendMsgData: "",
      informWayData: "",
    };
  },
  mounted() {
    //
    this.getDatas();
  },
  created() {
    this.isloading = false;
  },
  methods: {
    active_DateChange() {
      this.formData.datas[0].active_time = this.active_Date + " " + this.active_time;
    },
    active_timeChange() {
      this.formData.datas[0].active_time = this.active_Date + " " + this.active_time;
      // console.log(this.formData.datas[0].active_time)
    },
    //导出按钮
    handleAdd(e) {},
    //通知企业微信
    informClick() {
      if (this.selectionChangeData.length != "1") {
        this.$message({
          message: "请选择一条数据",
          type: "error",
        });
      } else {
        this.eventStausData(this.selectionChangeData[0].event_id);
        if (this.$refs["sendMsgfrom"]) {
          this.$refs["sendMsgfrom"].resetFields();
        }
        this.refSendMsgfrom();
        this.sendMsgdialog = true;
      }
    },
    eventStausData(event_id) {
      let param = {};
      param.funId = "msg_monitor_event";
      param.baseSQL = 'event_id like"%' + event_id + '%"';
      getlist(param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data.rows;
          this.sendMsgData = resdata;
          // console.log('this.sendMsgData',this.sendMsgData)
          if (resdata[0].is_inform == "0") {
            this.infoData(event_id);
          } else if (resdata[0].is_turn_to_alarm == "0") {
            this.aramData(event_id);
          }
        }
      });
    },
    sendMsgSave() {
      this.$refs.sendMsgfrom.validate((valid) => {
        if (valid) {
          this.sendMsg(this.sendMsgfrom);
          // if (this.sendMsgData[0].is_inform == '0') {
          //     this.infoData(this.sendMsgData[0].event_id)
          // } else if (this.sendMsgData[0].is_turn_to_alarm == '0') {
          //     this.aramData(this.sendMsgData[0].event_id)
          // }
        }
      });
    },
    infoData(event_id) {
      let param = {};
      param.funId = "msg_event_inform";
      param.baseSQL = "event_id =" + event_id;
      getlist(param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data.rows;
          this.informWayData = resdata;
          this.sendMsgfrom.inform_way = resdata[0].inform_way.split(";");
          this.sendMsgfrom.sendMsg = resdata[0].inform_content;
          // this.sendMsg(resdata)
        }
      });
    },
    aramData(event_id) {
      let param = {};
      param.funId = "msg_event_alarm";
      param.baseSQL = "event_id =" + event_id;
      getlist(param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data.rows;
          this.informWayData = resdata;
          this.sendMsgfrom.inform_way = resdata[0].inform_way.split(";");
          this.sendMsgfrom.sendMsg = resdata[0].inform_content;
          // this.sendMsg(resdata)
        }
      });
    },
    sendMsg(resdata) {
      if (!this.sendMsgfrom.userid && !this.sendMsgfrom.mobile) {
        this.$message({
          message: "请填写手机号码或邮件地址",
          type: "warning",
        });
      } else {
        resdata.inform_way = this.sendMsgfrom.inform_way.join(",");
        // console.log('this.sendMsgfrom',this.sendMsgfrom)
        getsendMsg(this.sendMsgfrom).then((res) => {
          if (res.status == "200") {
            this.$message({
              message: "通知成功",
              type: "success",
            });
          }
        });
        this.sendMsgdialog = false;
      }
    },
    refSendMsgfrom() {
      this.sendMsgfrom = {
        userid: "", //用户人
        sendMsg: "", //推送内容
        mobile: "", //手机号码
        inform_way: "", //通知方式
        userEmil: "", //邮箱地址
        funId: "",
        keyId: "",
      };
    },
    // 判断企业微信表单是否变化
    cancelSendMsgdialog() {
      this.sendMsgfrom.sendMsg = "";
      const num = Object.values(this.sendMsgfrom).filter(
        (val) => val !== "" && val !== null
      ).length;
      if (num > 1) {
        this.$confirm("表单未保存，是否关闭？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.sendMsgdialog = false;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消关闭",
            });
          });
      } else {
        this.sendMsgdialog = false;
      }
    },
    //判断表单是否变化
    handleClose() {
      let num = 0;
      for (const key in this.formData.datas[0]) {
        if (this.formData.datas[0][key] == "") {
          num += 0;
        } else if (this.formData.datas[0][key] == null) {
          num += 0;
        } else {
          num += 1;
        }
      }
      if (this.dialogtitle == "新增任务") {
        if (num != 1) {
          this.$confirm("表单未保存,是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消关闭",
              });
            });
        } else {
          this.dialogVisible = false;
        }
      } else {
        // console.log('222',JSON.stringify(this.formData.datas[0]))
        // console.log('2222',sessionStorage.getItem("initForm"))
        if (
          JSON.stringify(this.formData.datas[0]) == sessionStorage.getItem("initForm")
        ) {
          this.dialogVisible = false;
        } else {
          this.$confirm("表单未保存,是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消关闭",
              });
            });
        }
      }
      // console.log('num',num)
    },
    //获取事件名称信息
    TemplateData(e) {
      this.eventData = e;
      if (this.eventData.length != "0") {
        this.getcontroData(this.eventData[0].event_id);
      }
    },
    bind() {
      if (this.eventData.length == "0") {
        this.$message({
          message: "请选择一条数据",
          type: "error",
        });
      } else {
        if (this.eventData[0].is_to_control == "0") {
          if (this.contrOne.length == "0") {
            this.$message({
              message: "当前事件并未配置控制详情，请前往事件定义中配置控制详情",
              type: "error",
            });
            this.taskdialog = true;
          } else {
            this.formData.datas[0].event_name = this.eventData[0].event_name;
            this.formData.datas[0].event_id = this.eventData[0].event_id;
            // this.$refs["formdata"].validate((valid) => { })
            this.active_time = this.start_dateFormat(this.contrOne[0].start_date);
            // this.active_timeChange()
            this.taskdialog = false;
          }
        } else {
          this.formData.datas[0].event_name = this.eventData[0].event_name;
          this.formData.datas[0].event_id = this.eventData[0].event_id;
          // this.$refs["formdata"].validate((valid) => { })
          if (this.contrOne.length != "0") {
            this.active_time = this.start_dateFormat(this.contrOne[0].start_date);
          }
          // this.active_timeChange()
          this.taskdialog = false;
        }
      }
    },
    getcontroData(event_id) {
      let formData = {
        funId: "msg_event_control",
        baseSQL: 'event_id like "%' + event_id + '%"',
      };
      getlist(formData).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.contrOne = resdata.rows;
          // console.log('this.contrOne', this.eventData[0].is_to_control)
          if (this.eventData[0].is_to_control == "0") {
            if (this.contrOne.length == "0") {
              this.$message({
                message: "当前事件并未配置控制详情，请前往事件定义中配置控制详情",
                type: "error",
              });
              return false;
            }
          }
          // console.log('this.contrOne', this.contrOne)
          if (this.contrOne != "") {
            this.start_date = this.start_dateFormat(this.contrOne[0].start_date);
            this.end_date = this.end_dateFormat(this.contrOne[0].end_date);
          } else {
            this.start_date = "";
            this.end_date = "";
            this.active_time = "00:05";
          }
        }
      });
    },
    taskFrom() {
      this.taskdialog = true;
      // this.start_date=''
      // this.end_date=''
    },
    // 添加按钮
    AddData() {
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      this.formData.datas[0].scheduled_task_id = "";
      this.formData.datas[0].periodic_unit = "";
      this.formData.datas[0].task_name = ""; //任务名称
      this.formData.datas[0].active_status = "1"; //启用状态
      this.formData.datas[0].event_name = ""; //事件名称
      this.formData.datas[0].time_frame = ""; //执行周期
      this.formData.datas[0].active_time = ""; //执行时间
      this.formData.datas[0].inform_time = ""; //通知时间
      this.formData.datas[0].event_id = "";
      this.formData.datas[0].task_description = "";
      this.active_Date = "";
      this.active_time = "";

      this.dialogVisible = true;
      this.dialogtitle = "新增任务";
    },
    //编辑按钮
    editClick(e) {
      this.dialogtitle = "编辑任务";
      this.getDatas();
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      this.formData.datas[0] = e;

      this.formData.datas[0].time_frame = parseInt(e.time_frame);
      this.formData.datas[0].inform_time = parseInt(e.inform_time);
      this.formData.datas[0].active_time = moment(e.active_time).format(
        "YYYY-MM-DD HH:mm"
      );
      const strArr = this.formData.datas[0].active_time.split(" ");
      this.active_Date = strArr[0];
      this.active_time = strArr[1];
      this.getcontroData(e.event_id);
      sessionStorage.setItem("initForm", JSON.stringify(this.formData.datas[0]));
      // console.log('JSON.stringify(this.formData.datas[0])',JSON.stringify(this.formData.datas[0]))
      this.dialogVisible = true;
    },
    //双击打开编辑页面
    rowdbclick(row) {
      this.dialogtitle = "编辑任务";
      this.getDatas();
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      this.formData.datas[0] = row;
      this.formData.datas[0].time_frame = parseInt(row.time_frame);
      this.formData.datas[0].inform_time = parseInt(row.inform_time);
      this.formData.datas[0].active_time = moment(row.active_time).format(
        "YYYY-MM-DD HH:mm"
      );
      const strArr = this.formData.datas[0].active_time.split(" ");
      this.active_Date = strArr[0];
      this.active_time = strArr[1];
      this.getcontroData(row.event_id);
      this.dialogVisible = true;
      sessionStorage.setItem("initForm", JSON.stringify(this.formData.datas[0]));
    },
    //保存按钮
    save() {
      this.$refs["formdata"].validate((valid) => {
        if (valid) {
          if (this.formData.datas[0].scheduled_task_id) {
            this.updatetask();
            this.dialogVisible = false;
          } else {
            this.addtask();
            this.dialogVisible = false;
          }
        }
      });
    },
    //添加数据
    addtask() {
      getgridsave(this.formData).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getDatas();
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
    //修改数据
    updatetask() {
      getgridsave(this.formData).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getDatas();
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    //删除数据
    delClick(info) {
      var tablefromdata = {
        funId: "msg_scheduled_task",
        ids: "",
      };
      this.selectionChangeData.forEach((item) => {
        tablefromdata.ids += item.scheduled_task_id + ";";
      });
      this.$confirm(`已选择${this.selectionChangeData.length}条数据, 是否删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        getdeletes(tablefromdata).then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getDatas();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
      });
    },
    // 数据搜索按钮
    onSearch() {
      this.param.pageNo = 1;
      this.getDatas();
    },
    getDatas() {
      if (this.param.name == "") {
        this.param.baseSQL = "";
      } else {
        this.param.baseSQL = 'task_name like"%' + this.param.name + '%"';
      }
      getlist(this.param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.tabledatas = resdata.rows;
          this.dataTotal = resdata.total;
        }
      });
    },
    //禁用启用按钮
    forbiddenClick() {
      // this.loading = true
      let fromData = {
        funId: "msg_scheduled_task",
        is_iot: false,
        datas: [{}],
      };
      let statusName = "";
      fromData.datas = this.selectionChangeData;
      // if (this.statusData == '0') {
      //     for (let i = 0; i < fromData.datas.length; i++) {
      //         fromData.datas[i].active_status = '1'
      //     }
      //     statusName = '禁用'
      // }
      // if (this.statusData == '1') {
      //     for (let i = 0; i < fromData.datas.length; i++) {
      //         fromData.datas[i].active_status = '0'
      //     }
      //     statusName = '启用'
      // }
      for (let i = 0; i < fromData.datas.length; i++) {
        if (fromData.datas[i].active_status != this.statusData) {
          this.$message({
            message: "只能选择相同状态记录，进行启用/禁用",
            type: "error",
          });
          this.getDatas();
          // this.toggleSelection(fromData.datas)
          return false;
        } else if (this.statusData == "0") {
          fromData.datas[i].active_status = "1";
          statusName = "启用";
        } else if (this.statusData == "1") {
          fromData.datas[i].active_status = "0";
          statusName = "禁用";
        }
      }
      this.$confirm(
        `当前选择了${this.selectionChangeData.length}条数据, 是否${statusName}?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // for (let i = 0; i < fromData.datas.length; i++) {
          //     if (fromData.datas[i].active_status != this.statusData) {
          //         this.$message({
          //             message: '只能选择相同状态记录，进行启用/禁用',
          //             type: 'error'
          //         });
          //         this.getDatas()
          //         // this.toggleSelection(fromData.datas)
          //         return false;
          //     } else if (this.statusData == '0') {
          //         fromData.datas[i].active_status = '1'
          //     } else if (this.statusData == '1') {
          //         fromData.datas[i].active_status = '0'
          //     }
          // }
          getgridsave(fromData).then((res) => {
            if (res.data.code == "200") {
              this.$message({
                message: "修改启用状态成功",
                type: "success",
              });
              this.loading = false;
              this.getDatas();
              // this.toggleSelection()
            } else {
              this.$message({
                message: "修改启用状态失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: `已取消${statusName}`,
          });
          this.getDatas();
        });
    },
    // 复选框按钮
    selectionChange(e) {
      if (e.length == 0) {
        this.statusData = "";
        this.selectionChangeData = "";
      } else {
        this.statusData = e[0].active_status;
        this.selectionChangeData = e;
      }
    },
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e);
      const _selectData = this.$refs.talbes.selection;
      this.selectionChange(_selectData);
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1;
    },
    sizeChange(val) {
      this.param.limit = val;
      this.getDatas();
    },
    currentChange(val) {
      this.param.pageNo = val;
      this.param.offset = (val - 1) * this.param.limit;
      this.getDatas();
    },
    dateFormat(row, column, cellValue, index) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm");
    },
    start_dateFormat(date) {
      return moment(date).format("HH:mm:ss");
    },
    end_dateFormat(date) {
      return moment(date).format(" HH:mm:ss");
    },
  },
};
</script>
<style>
.el-select-dropdown {
  min-width: 200px !important;
}

.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style lang="scss" scoped>
.action01 {
  animation: zoomIn 0.5s;
  animation-iteration-count: 1;
}

.action02 {
  animation: zoomOut 0.5s;
  animation-iteration-count: 1;
}

.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 0;
  width: calc(100% - 55px);
  z-index: 4;
}

.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}

.container-box {
  padding: 10px;
  margin: 50px 0;
}

.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}

.action03 {
  animation: scaleDrew 0.5s;
}

@keyframes scaleDrew {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}
</style>
